<!DOCTYPE html>
<html lang="zh-cn" ng-app="startApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="image/logo.png">
    <link rel="stylesheet" href="style/normalize.css">
    <title>Examples | Image</title>
    <meta name="Keywords" content="image2D canvas svg examples" />
    <meta name="author" content="你好2007" />
    <meta name="email" content="2501482523@qq.com" />
    <!-- <script src="https://unpkg.com/image2d@1.13.1/build/image2D.min.js"></script> -->
    <script>

        var host = window.location.host;

        // 如果不是本地，说明不是开发环境，无需启动自动刷新
        if (/^127\.0\.0\.1/.test(host) || /^localhost/.test(host)) {

            let ws = new WebSocket('ws://localhost:30001/refresh-page');

            // 连接成功
            ws.addEventListener('open', function (event) {
                ws.send('服务器，你好呀！');
            });

            // 监听来自服务器的数据
            ws.addEventListener('message', function (event) {

                console.log('来自ws服务器的数据：', event.data);

                // 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，
                // 它都会绕过缓存，从服务器上重新下载该文档
                window.location.reload(true);

            });

        }

    </script>
</head>

<body>

    <!--路由跳转视图-->
    <div ui-view>

        <section style='padding:10px;'>

            <h2 style='line-height: 70px;'>
                Examples | Image
            </h2>

            <h4 style='margin-top: 50px;'>
                image2D
                <a href="https://www.oschina.net/p/image2d">
                    📊📈🎉 本项目加入了 开源中国 并在其开源，欢迎大家关注！
                </a>
            </h4>

            <p style='line-height: 2em;margin-top: 30px;'>
                <a href="https://github.com/hai2007/image2D">image2D.js</a>
                是一个专注于前端绘图的JavaScript库。
                <a href="https://hai2007.gitee.io/image2d">image2D</a>
                可以帮助你更简单的使用HTML, SVG, CSS和Canvas来发挥你的创意，
                虽然直接使用原生接口也是可以的，不过使用
                <a href="https://hai2007.gitee.io/image2d">image2D</a>
                更容易，而且我们保留了足够的灵活性。
            </p>

        </section>

    </div>

    <!-- 引入代码 -->
    <script src="./lib/preload.js"></script>

    <!-- 辅助记录访问次数 -->
    <div style="position: fixed;left: -300px;top: 0;width: 190px;height: 103px;">
        <img
            src="https://s05.flagcounter.com/count2/bdd0/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_3/labels_1/pageviews_1/flags_0/percent_0/" />
    </div>

</body>

</html>
